<script lang="ts" setup>
import { ref } from "vue"
import { fontSize, EventEmitters } from "@/composables/index";


interface Props {
    title?: string;
    showTitle?: boolean;
    showBack?: boolean;
    backColor?: string;
    backSize?: string;
    leftIcon?: string;
    showRight?: boolean;
    rightColor?: string;
    rightSize?: string;
    rightIcon?: string;
    titleBk?: string;
    titleColor?: string;
}

const props = withDefaults(defineProps<Props>(), {
    title: "标题",
    showTitle: true,
    showBack: false,
    backColor: "rgb(255 255 255)",
    backSize: "20",
    leftIcon: "arrow-left",
    showRight: true,
    rightColor: "rgb(255 255 255)",
    rightSize: "30",
    rightIcon: "user-circle-o",
    titleBk: "rgb(58, 153, 251)",
    titleColor: "rgb(255, 255, 255)",
});

const emits = defineEmits({
    /**
     * 获取事件对象
     * @param event 事件对象
     */
    'rightLongPress': (event: MouseEvent | TouchEvent) => {
        return event;
    },
    /**
     * 获取事件对象
     * @param event 事件对象
     */
    'leftLongPress': (event: MouseEvent | TouchEvent) => {
        return event;
    },
    /**
     * 获取事件对象
     * @param event 事件对象
     */
    'centerLongPress': (event: MouseEvent | TouchEvent) => {
        return event;
    }
})


const title: any = ref(props.title)
const showBack: any = ref(props.showBack)
EventEmitters.on("route:WATCH_PROPS", (n: any) => {
    title.value = n.name
    showBack.value = n.meta.back ?? false
})

const leftLongPress = (e: MouseEvent | TouchEvent) => {
    emits("leftLongPress", e)
}
const centerLongPress = (e: MouseEvent | TouchEvent) => {
    emits("centerLongPress", e)
}
const rightLongPress = (e: MouseEvent | TouchEvent) => {
    emits("rightLongPress", e)
}
</script>
<template>
    <van-nav-bar :style="{ background: titleBk }">
        <template #left v-if="showBack">
            <van-icon :name="leftIcon" :color="backColor" :size="backSize"
                v-longpress="{ callback: leftLongPress, pressType: 'circle', clickDuration: 5000 }" />
        </template>
        <template #title v-if="showTitle">
            <label :style="{ color: titleColor, fontSize: fontSize.large, height: '46px', lineHeight: '46px' }"
                v-longpress="{ callback: centerLongPress, pressType: 'circle', clickDuration: 3000 }">
                {{ title }}
            </label>
        </template>
        <template #right v-if="showRight">
            <van-icon :name="rightIcon" :color="rightColor" :size="rightSize"
                v-longpress="{ callback: rightLongPress, pressType: 'circle', clickDuration: 1000 }" />
        </template>
    </van-nav-bar>
</template>
<style lang="scss" scoped></style>